<template>
  <div id="activityConfig">
    <h1 class="con-right-title">
      转介绍运营位配置
    </h1>
    <!-- 操作按钮 -->
    <div class="search-box">
      <el-form
        :model="searchInfo"
        :inline="true"
        ref="ruleForm"
        class="demo-form-inline"
      >
        <el-form-item label="运营位名称:" prop="name">
          <el-input
            size="small"
            v-model="searchInfo.name"
            placeholder="请输入运营位名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="时间:" prop="createTime">
          <el-date-picker
            size="small"
            v-model="searchInfo.createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="checkedTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button type="success" icon="el-icon-search" @click="toSearch">
            确定
          </el-button>
          <el-button type="success" plain @click="resetForm('ruleForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-button
        type="warning"
        icon="el-icon-plus"
        @click="addEditConfig('add')"
      >
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        label="运营位名称"
        prop="name"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column label="运营位图片" min-width="200" align="center">
        <template slot-scope="scope">
          <span>
            <listImgString
              v-if="scope.row.img"
              :imgInfo="scope.row.img"
            ></listImgString>
            <template v-else>-</template>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" min-width="250">
        <template slot-scope="scope">
          <template>
            <el-button
              v-if="scope.row.status === 1"
              type="text"
              @click="handlerConfig(scope.row, 'DOWN_SHELF')"
            >
              下架
            </el-button>
            <el-button
              v-else
              type="text"
              @click="handlerConfig(scope.row, 'UP_SHELF')"
            >
              上架
            </el-button>
          </template>
          <template>
            <el-button type="text" @click="addEditConfig('edit', scope.row)">
              编辑
            </el-button>
          </template>
          <template>
            <el-button type="text" @click="deleteConfig(scope.row)">
              删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增弹窗 -->
    <edit-dialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @toSearch="toSearch"
    />
  </div>
</template>

<script>
import editDialog from './editDialog'
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import {
  getActivityConfigList,
  activityConfigUpShelf,
  activityConfigDownShelf,
  deleteActivityConfig
} from '@/api/partner/activityConfig'
export default {
  components: {
    editDialog,
    listImgString
  },
  data() {
    return {
      loading: true,
      tableData: [],
      searchInfo: {
        name: '',
        startTime: '',
        endTime: '',
        createTime: []
      },
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      editDialogData: {}
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    searchList() {
      this.loading = true
      const { name, startTime, endTime } = this.searchInfo
      const obj = { name, startTime, endTime, ...this.searchParams }
      getActivityConfigList(obj, (response) => {
        this.loading = false
        this.tableData = response.rows
        this.total = response.total
      })
    },
    /* 开始结束时间 */
    checkedTime(val) {
      this.searchInfo.startTime = val && val.length > 1 ? val[0] : ''
      this.searchInfo.endTime = val && val.length > 1 ? val[1] : ''
    },
    /* 查询 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 重置 */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.checkedTime()
    },
    /* 新增配置 */
    addEditConfig(type, row) {
      if (type === 'add') {
        this.editDialogData = { type, isShow: true }
      } else {
        this.editDialogData = { type, isShow: true, id: row.id }
      }
    },
    /* 上架下架 */
    handlerConfig(row, state) {
      if (state === 'UP_SHELF') {
        activityConfigUpShelf(row, () => {
          this.searchList()
          this.$message.success('上架成功')
        })
      } else {
        activityConfigDownShelf(row, () => {
          this.searchList()
          this.$message.success('下架成功')
        })
      }
    },
    /* 删除配置 */
    deleteConfig(row) {
      this.$confirm('确定要在系统中永久删除此条配置吗', '删除礼物', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteActivityConfig(row, () => {
            this.searchList()
            this.$message.success('删除成功')
          })
        })
        .catch(() => {
          this.$message('取消删除')
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
